<template>
  <div class="app-content">
    <Row>
      <Button type="text" icon="md-home" ghost class="back-page" @click="openHome">回到主页</Button>

    </Row>
    <Row :gutter="16" style="padding: 24px 32px">
      <Col :xs="24" :sm="12" :md="6" :lg="6" v-for="contact in contactList" style="margin-top: 8px">
        <Card style="height: 300px">
          <div class="card-content" style="text-align:center;display: flex;flex-direction: column">
            <div style="padding: 4px">

              <div>
                <div v-if="contact.topBtnType()=='turn'">
                  <a  class="turn-text" :href="contact.href">{{contact.topBtnText()}}</a>
                </div>
                <div v-else-if="!contact.topBtnType() || contact.topBtnType()=='copy'">
                  <Button class="copy-text"  :data-clipboard-text="contact.href" type="text">{{contact.topBtnText()}}</Button>
                </div>
              </div>

            </div>
            <div class="card-img-dom">
              <img v-if="contact.imgSrc" :src="contact.imgSrc" class="card-img" style="object-fit: contain;">
              <div style="width: 100%;height: 100%;padding: 24px;display: flex;justify-content: center;align-items: center" class="lz-color-sub" v-else-if="contact.info">
                {{contact.info}}
              </div>
            </div>
            <div class="card-text-dom">
              <h3>{{contact.title}}</h3>
            </div>
          </div>
        </Card>

      </Col>
    </Row>
  </div>

</template>

<script setup>
import {onMounted, onUnmounted, ref} from 'vue'
import mini from '@/assets/images/contact/miniProgram.jpg'
import official from '@/assets/images/contact/official.jpg'
import electron from '@/assets/images/contact/electron.png'
import {isWeixinBrowser,isMobile} from '@/libs/util.js'
import {Message} from 'view-ui-plus'
import Clipboard  from 'clipboard'


const isWx=ref(false)
onMounted(()=>{
  isWx.value=isWeixinBrowser()
})
const contactList = ref([
  {
    type: 'wxMini',
    href: '#小程序://工具箱/3HP7PBxOOg9FyNG',
    imgSrc:mini,
    title:'前往小程序',
    // topBtnText:'点击复制,粘贴到微信聊天框打开/长按图片保存',
    topBtnText:()=>{
      if(isWeixinBrowser()){
        return '点击复制 / 长按图片跳转'
      }else{
        if(isMobile()){
          return '点击复制,粘贴到微信聊天框打开 / 长按图片保存'
        }else {
          return '点击复制,粘贴到微信聊天框打开 / 扫码 / 右键图片保存'
        }
      }
    },
    topBtnType:()=>{
      return 'copy'
    },
  },
  {
    type: 'official',
    href: 'https://mp.weixin.qq.com/s/dkJEYPQPJRfNUsAUnjDLfw',
    imgSrc:official,
    title:'前往公众号',
    topBtnText:()=>{
      if(isWeixinBrowser()){
        return '点击直接跳转 / 长按图片跳转'
      }else{
        if(isMobile()){
          return '点击复制,粘贴到微信聊天框打开 / 长按图片保存'
        }else {
          return '点击复制,粘贴到微信聊天框打开 / 扫码 / 右键图片保存'
        }
      }
    },
    topBtnType:()=>{
      if(isWeixinBrowser()){
        return 'turn'
      }else{
        return 'copy'
      }
    }
  },
  {
    type: 'link',
    href: 'https://blog.csdn.net/zjsj_lize?type=blog',
    // imgSrc:official,
    title:'前往CSDN',
    topBtnText:()=>{
      if(isMobile()){
        return '点击跳转csdn'
      }else{
        return '点击跳转csdn'
      }
    },
    topBtnType:()=>{
      return 'turn'
    },
    info:'博客简介：保持学习，保持热爱，做一个有趣的人。原创不易，请收藏、点赞、关注'
  },
  {
    type: 'link',
    href: 'https://pan.baidu.com/s/1yrl0jYpti7QCn8CHBRT2lw?pwd=1234',
    imgSrc:electron,
    title:'网盘获取桌面端工具',
    topBtnText:()=>{
      return '点击跳转网盘'
    },
    topBtnType:()=>{
      return 'turn'
    },
    info:'桌面端工具功能：svga动画预览 | node版本管理'
  },
  {
    type:'link',
    href:'https://gitee.com/zjsj_lize/lize-tools-web/tree/open/',
    title:'web代码仓库',
    topBtnText:()=>{
      return '点击跳转码云'
    },
    topBtnType:()=>{
      return 'turn'
    },
    info:'借鉴代码，请拉取open分支'
  }

])

const clipboard=ref(null)
onMounted(() => {

  clipboard.value = new Clipboard('.copy-text', {
    // text: function() {
    //   return '要复制的文本内容';
    // }
  });

  clipboard.value.on('success', function(res) {
    console.log('复制成功！',res);
    Message.info({
      content:`复制成功：${res.text}`
    })
    // 可以在这里执行复制成功后的逻辑
  });

  clipboard.value.on('error', function(err) {
    console.log('复制失败！',err);
    // 可以在这里执行复制失败后的逻辑
    if(!err.text){
      Message.warning({
        content:'复制失败：复制文本不能为空'
      })
    }else{
      Message.warning({
        content:JSON.stringify(err)
      })
    }

  });
});
onUnmounted(()=>{
  if(clipboard.value){
    clipboard.value.destroy()
  }
})

function toHref(contact){
  location.href=contact.href
}
import router from "@/router";
function openHome(){
  router.push('home')
}
</script>

<style scoped>
.card-content{
  width: 100%;
  height: 100%;
}
.card-img-dom{
  flex-grow: 1;
  position: relative;
}
.card-text-dom{
  padding: 8px 4px;
}
:deep(.ivu-card-body){
  width: 100%;
  height: 100%;
}
.card-img{
  object-fit: contain;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.copy-text,.turn-text{
  cursor: pointer;
  padding: 0;
  color:#00AEAD;
  white-space: normal;
  height: auto;
}
.app-content{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.back-page{
  color: #00AEAD;
  font-weight: bold;

}
.back-page:hover{
  color: #1a5cd7;
}
</style>
